<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkedAll() {
            $('input:checkbox').prop('checked', true);
        }

        function checkedNone() {
            $('input:checkbox').prop('checked', false);
        }

        $(function () {
            $('#checkedAllBtn').click(checkedAll);
            $('#checkedNoBtn').click(checkedNone);
            $('#checkedRevBtn').click(function () {
                //each jQuery遍历的函数
                $('input:checkbox').each(function () {
                    this.checked = !this.checked;
                });
            });
            $('#checkedAllBox').click(function () {
                //如何获取当前复选框的选中状态
                //在function中 this代表当前元素的DOM对象
                if (this.checked) {
                    checkedAll();
                } else {
                    checkedNone();
                }
            });
            $('input').click(function () {
                //全选、全不选按钮自动勾选
                //1.获取可选项的总数
                var length = $('input:checkbox[name=items]').length;
                //2.获取已经勾选的项的总数
                var checkedLength = $('input:checkbox[name=items]:checked').length;
                if (length == checkedLength) {
                    $('#checkedAllBox').prop('checked', true);
                } else {
                    $('#checkedAllBox').prop('checked', false);
                }
            })
        });
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>
</body>
</html>